<script setup>
	// 起始页
	import startPage from "./components/start-page.vue"
	// 聊天页
	import chatArea from "./components/chat-area.vue"
	// AI绘图
	import aiDrawing from "./components/ai-drawing.vue"
	// 底部输入框
	import inputBox from "./components/input-box.vue"
	// 个人中心
	import personalCenter from '@/pages/personal-center/index.vue'
	// 登录页面
	import loginPage from '@/pages/login-page/index.vue'
	import { onLoad } from "@dcloudio/uni-app"
	import { ref, watch, getCurrentInstance, nextTick } from "vue"
	import { useCommonStore } from "@/stores/index.js"
	import { chatbotMessageStore } from "@/stores/chatbotMessage.js"
	import { useUserStore } from "@/stores/user.js"
	import { getStatusBarHeight, getMenuButtonHeight } from "@/utils/system.js"
	const commonStore = useCommonStore()
	const chatbotMessage = chatbotMessageStore()
	const userStore = useUserStore()

	// menu列表
	const menuList = ref(["我的", "对话", "AI绘图"])

	// 监听组件高度，始终滚动底部
	const instance = getCurrentInstance();
	watch(() => chatbotMessage.messages, (newval) => {
		nextTick(() => {
			const query = uni.createSelectorQuery().in(instance.proxy);
			query.select('#chatAreaVue').boundingClientRect((rect) => {
				uni.pageScrollTo({
					scrollTop: rect.height + 200
				})
			}).exec()
		})
	}, { deep: true })

	// 监听token
	watch(() => userStore.userInfo.token, (newval) => {
		if (newval) {
			userStore.getChatList()
		}
	})

	onLoad(() => {
		if (userStore.userInfo.token) {
			userStore.getChatList()
		}
	})
</script>

<template>
	<!-- 顶部导航栏 -->
	<view class="menu-container">
		<!-- 状态栏高度 -->
		<view :style="{height:getStatusBarHeight()+'px'}"></view>
		<view class="menu-list" :style="{height:getMenuButtonHeight()+'px'}">
			<text v-for="(item,index) in menuList" :key="index" :class="{'active':commonStore.selectIndex===index}"
				@click="commonStore.setSelectIndex(index)">{{item}}</text>
		</view>
	</view>
	<!-- 占位 -->
	<view :style="{height:getStatusBarHeight()+getMenuButtonHeight()+'px'}"></view>
	<!-- 默认内容-起始页 -->
	<start-page v-show="commonStore.selectIndex === 1 && chatbotMessage.messages.length <= 0"></start-page>
	<!-- 文生文对话组件 -->
	<chat-area id="chatAreaVue" v-show="commonStore.selectIndex === 1 && chatbotMessage.messages.length > 0"></chat-area>
	<!-- ai绘图 -->
	<ai-drawing v-show="commonStore.selectIndex === 2"></ai-drawing>
	<!-- 底部输入框 -->
	<input-box v-show="commonStore.selectIndex === 1"></input-box>
	<!-- 个人中心 -->
	<personal-center v-show="commonStore.selectIndex === 0"></personal-center>
	<!-- 登录页面 -->
	<!-- <login-page v-if="!userStore.userInfo.token"></login-page> -->
	<view class="safe-area-input"></view>
</template>

<style lang="scss" scoped>
	.menu-container {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		background: linear-gradient(#FCE7CC, $bg-color);
	}

	.menu-list {
		display: flex;
		align-items: center;
		padding-left: 20rpx;

		text {
			color: #9D9486;
			font-weight: bold;
			transition: 0.2s;

			&.active {
				color: #333;
			}

			&:nth-child(2) {
				padding: 0 60rpx;
			}
		}
	}

	.safe-area-input {
		height: calc(120rpx + env(safe-area-inset-bottom));
	}
</style>
<style lang="scss">
	page {
		background-color: $bg-color;
	}
</style>